<template>
	<a-modal
	:width="550" :visible="visible" :title="modalTitle" @cancel="handleClose" centered :mask-closable="false">
		<div class="preview_item">
			<video :autoplay="true" ref="audioPlayer" controls name="media" class="audio_item">
				<source :src="materialDetail.material_url" type="audio/mp4" />
			</video>
		</div>
		
		<div class="preview_item" style="height: 100px; display: flex;align-items: center;justify-content: center; color: #0075ff;" v-if="recognizeText?.captionsShow?.length == 0 && confirmLoading == true">
			<a-spin tip="文字识别中..." style="width: 100%; height: 40px;"></a-spin>
		</div>
		
		<div class="recognize_con" style="padding: 10px; max-height: 400px;" v-else>
			<div class="recognize_item" v-for="(item, index) in recognizeText.captionsShow" :key="index">
				<div class="recocgnize_time">{{item.endStr}}</div>
				<div class="recocgnize_text" contenteditable="true" v-html="recognizeText.captionsShow[index].FinalSentence" @focus="value=>handleBlur(value, index)" @blur="value=>handleBlur(value, index)"></div>
			</div>
		</div>
		
		<template #footer>
			<a-popconfirm
			    title="确定要重置当前内容吗?"
			    ok-text="是"
			    cancel-text="否"
			    @confirm="resetRecognize"
			    @cancel="()=>{}">
			    <a-button v-if="  recognizeText?.captionsShow?.length>0" type="default">重置</a-button>
				<!-- {{recognizeText?.captionsShow?.length + 'len'  }}
				{{recognizeText  }} -->
			</a-popconfirm>
			<a-button v-if="recognizeText?.captionsShow?.length>0" type="primary" @click="saveRecognize">保存</a-button>
		</template>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick
	} from "vue";
	import {
		FolderAddOutlined
	} from "@ant-design/icons-vue";
	import {message} from 'ant-design-vue';
	import request from "../../../../../../common/utils/request";
	import { useTimeoutPoll } from "@vueuse/core";	
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			materialDetail: {
				type: Object,
				default: ()=>{return {}}
			}
		},

		components: {
		},

		setup(props, context) {
			const audioPlayer = ref()
			const state = reactive({
				TaskId: '',
				TextId: '',
				recognizeText: {
					captionsShow:[],
				},
				confirmLoading: false
			});

			const handleClose = () => {
				context.emit('close')
			}
			
			const modalTitle = computed(()=>{
				if(props.materialDetail.material_url){
					return '识别-'+props.materialDetail.material_name
				} else {
					return '识别文本'
				}
			})

			const getTaskId = (params) => {
				request.post('/work_ai', '/user/shotstack/parseAudioToTxt', {
					material_id: params.id
				}).then(res=> {
					state.TaskId = res.result.Data.TaskId
					state.TextId = res.result.audio_asr_text_id
					resume()
				})
			}
			
			const getRecognizeResult = () => {
				request.get('/work_ai', '/user/shotstack/parseAudioToTxt/get', {
					TaskId: state.TaskId
				}).then(res=> {
					if(res.result.Data.StatusStr == 'success' || res.result.Data.StatusStr == 'done'){
						// state.recognizeText = res.result.captions.captionsShow
						state.recognizeText = res.result.captions
						pause()
					}
				}).catch(err=>{
					pause()
				})
			}
			
			const saveRecognize = () => {
				state.confirmLoading = true
				request.put('/work_ai', '/user/shotstack/parseAudioToTxt/update', {
					captionsShow: state.recognizeText.captionsShow,
					audioAsrTextId: state.TextId
				}).then(res=> {
					message.success('保存成功！')
					let obj = {}
					obj['captions'] = state.recognizeText
					obj['item'] = props.materialDetail
					context.emit('close', obj)
					state.confirmLoading = false
				}).catch(err=>{
					state.confirmLoading = false
				})
			}
			const { isActive, pause, resume } = useTimeoutPoll(
				getRecognizeResult,
				1000
			)
			
			const resetRecognize = () => {
				state.recognizeText = {
					captionsShow:[],
				}
				state.confirmLoading = false
				resume()
			}
			
			const handleBlur = (e, index) => {
				console.log(state.recognizeText.captionsShow[index].EndMs / 1000,'currentTime');
				state.recognizeText.captionsShow[index].FinalSentence = e.target.innerText
				audioPlayer.value['currentTime'] = state.recognizeText.captionsShow[index].EndMs / 1000
			}
			
			watch(() => props.visible, val => {
				if(val && !props.materialDetail?.audio_text?.captions?.captionsShow?.length){
					getTaskId(props.materialDetail)
				}
				if(val && props.materialDetail?.audio_text?.captions?.captionsShow){
					state.recognizeText.captionsShow = props.materialDetail?.audio_text?.captions?.captionsShow
					state.TextId =  props.materialDetail?.audio_text?.id
					state.TaskId =  props.materialDetail?.audio_text?.task_id
				}
				if(!val){
					state.recognizeText.captionsShow = []
					state.confirmLoading = false
					pause()
				}
			})

			return {
				...toRefs(state),
				modalTitle,
				handleClose,
				getTaskId,
				getRecognizeResult,
				saveRecognize,
				resetRecognize,
				audioPlayer,
				handleBlur
			}
		},
	});
</script>

<style lang="less" scoped>
	[contenteditable]:focus {
		outline: none;
		color: #0075ff;
	}
	.recognize_con{
		overflow-y: scroll;
		
		&::-webkit-scrollbar {
		  width: 6px;
		}
		
		&::-webkit-scrollbar-track {
		  width: 5px;
		  background-color: transparent;
		  -webkit-border-radius: 4px;
		  -moz-border-radius: 4px;
		  border-radius: 4px;
		}
		
		&::-webkit-scrollbar-thumb {
		  background-color: rgba(193, 193, 193, 0.5);
		  background-clip: padding-box;
		  min-height: 28px;
		  -webkit-border-radius: 4px;
		  -moz-border-radius: 4px;
		  border-radius: 4px;
		}
		.audio_item{
			width: 100% !important;
			height: 55px !important;
		}
		
		.recognize_item{
			display: flex;
			align-items: flex-start;
			margin-top: 10px;
			.recocgnize_time{
				
			}
			.recocgnize_text{
				margin-left: 20px;
				display: flex;
				align-items: center;
				border: none;
			}
		}
	}
	
	.preview_item{
		background-color: #fff;
		.audio_item{
			width: 100% !important;
			height: 55px !important;
		}
	}
</style>